<template>
	<view class="sunSingle">
		<scroll-view scroll-y="true" :refresher-triggered="data.refresherBool" :refresher-enabled="true" @refresherrefresh="refresherrefresh">
			<view class="listItem" v-for="(item,index) in data.list" :key="index">
				<view class="top">
					订单编号:{{item.sonOrderNo}}
				</view>
				<view class="bot1">
					<view class="left">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.mainPictureId" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="">
							{{item.spuName}}
							<text>{{item.specName}}；{{item.specValue}}</text>
						</view>
						x{{item.count*1}}
					</view>
				</view>
				<view class="bot" v-if="item.evaluationStatus?.value=='WAIT_EVALUATE'">
					<text @tap="handeClick(item)">评价</text>
				</view>
				<view class="bot2" v-else>
					<text>已评价</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive,ref } from 'vue';
	import {orderProductListBySonOrderNo} from '@/utils/api/goods'
	const data = reactive<any>({
		list:[],
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ id }) => {
		data.id = id;
		requstList()
	})
	const requstList=()=>{
		uni.showLoading({
			title:'加载中...',
			mask:true
		})
		orderProductListBySonOrderNo({data:{sonOrderNo:data.id}}).then((res)=>{
			data.list = res.data
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const handeClick=(item)=>{
		uni.navigateTo({
			url:`/pages/lifeEvaluate/index?sonOrderNo=${item.sonOrderNo}&skuId=${item.skuId}`
		})
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		requstList()
	}
</script>

<style lang="scss">
.sunSingle{
	height: 100vh;
	background: #F4F6FA;
	display: flex;
	flex-direction: column;
}
scroll-view{
	padding: 24rpx;
	flex: 1;
	overflow: auto;
}
.listItem{
	margin-bottom: 24rpx;
	padding: 24rpx;
	border-radius: 24rpx;
	background: #fff;
	.bot1{
		margin: 24rpx 0;
		display: flex;
		.left{
			width: 160rpx;
			height: 160rpx;
			background: #ccc;
			border-radius: 24rpx;
			margin-right: 24rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
		.right{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #8C8C8C;
			font-size: 24rpx;
			view{
				display: flex;
				flex-direction: column;
				text{
					margin-top: 10rpx;
					color: #8C8C8C;
					font-size: 24rpx;
				}
			}
		}
	}
	.bot{
		display: flex;
		justify-content: flex-end;
		text{
			width: 120rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 64rpx;
			color: #fff;
			background: #6B64D3;
		}
	}
	.bot2{
		display: flex;
		justify-content: flex-end;
		text{
			width: 150rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 64rpx;
			color: #c5c5c5;
			// background: #6B64D3;
		}
	}
	
}
</style>